import React, { useState } from 'react';
import './index.scss';
import type { MenuProps } from 'antd';
import { Menu ,Button, ConfigProvider,} from 'antd';
import {RouterRwaStore} from '../types/index'
import { ItemType,MenuItemType } from 'antd/es/menu/hooks/useItems';
import { staicRoutes } from '../router/routes';
import { useLocation,useNavigate } from 'react-router';
import { TinyColor } from '@ctrl/tinycolor'
type MenuItem = Required<MenuProps>['items'][number];
const colors1 = ['#6253E1', '#04BEFE'];
const getHoverColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).darken(5).toString());

const Index:React.FC=()=>{
    const [isShow,setIshow] = useState(false)
     //渲染路由表
     const renderMenu=(routes:RouterRwaStore[]):ItemType<MenuItemType>[]=>routes
     .filter((v)=>{
        const userInfo = JSON.parse(localStorage.getItem('userInfo')! ||'')
        // 权限
        if(userInfo.role === '管理员') return true  // 用户角色是管理原 则可见所有路由中的组件
        if(!v.meta?.role) return true  // 路由表中如果没有这个角色 则可见
        return v.meta.role.includes(userInfo.role)  // 如果路由表中的 角色包含用户的角色 则 可见 
     })
     .filter((v)=>{
        // meta字段为 true 表示当前组件不可见
        if(v.meta?.hidden) return false
        // 当前组件可见
        return true
     })
     .map((v)=>{
        return{
            key:v.path,
            label:v.meta?.label,
            children:v.children && renderMenu(v.children)
        }
})
const {pathname} =useLocation()
 const navigate = useNavigate()
const SelectedKeys = pathname.slice(1).split('/').reduce((p,n)=>{
    // 将当前元素 n 前面加上 / n 是每一项
    n = '/' +n
    // 然后将其与前面的元素 p 进行拼接 p 是初始值
    p.push(p.join('')+n)
    return p
   },[] as string[])
   const items: MenuItem[] = renderMenu(staicRoutes);
 
// 展示下拉菜单
const handerAdd=()=>{
   setIshow(!isShow)
}
//    新建文章
const handerUpdateArticles=()=>{

}
  return (
      <div className='container' >
        <h1>管理后台</h1>
            <ConfigProvider
                theme={{
                    components: {
                    Button: {
                        colorPrimary: `linear-gradient(135deg, ${colors1.join(', ')})`,
                        colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors1).join(', ')})`,
                        colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors1).join(', ')})`,
                        lineWidth: 0,
                    },
                    },
                }}
                >
                <Button type="primary" size="large" 
                style={{width:'150px'}} 
                onClick={()=>handerAdd()}
                className='btn'
                >
                    +新建
                    {
                        isShow? "Hide" :"Show"  // isShow 为true展示下拉菜单  为fasle展示隐藏菜单
                    }
                </Button>
                {
                     // 
                    isShow &&(
                         <div className='select' >
                            <p>新建文章-协同编辑器</p>
                            <p onClick={()=>handerUpdateArticles()}>新建文章</p> 
                            <p>新建页面</p>
                    </div>
                    )
                }
                </ConfigProvider>
                
        <div style={{ width: 200 }}>
            <Menu
                defaultSelectedKeys={[pathname]} // 初始化选中的组件
                mode="inline"
                theme="dark"
                onClick={({key})=>navigate(key)}
                defaultOpenKeys={SelectedKeys} // 初始化展开的组件
                items={items} //菜单内容
            />
        </div>
       
      </div>
  );
}
export default Index